import { IComment } from 'apis/types/comment'
import React, { FC, memo } from 'react'
import styles from './style.module.css'
import cn from 'classnames'
import { formatDatetime } from 'helpers/time'
import { Icon } from '@blueprintjs/core'
interface IProps {
  data: IComment
  onLikeChange: (comment: IComment) => void
}
const Comment: FC<IProps> = memo(({ data, onLikeChange }) => {
  const { user, content, beReplied, time, likedCount, liked } = data
  const handleUnLike = async () => {
    await onLikeChange(data)
  }
  return (
    <div className={styles.root}>
      <div className={styles.avatar}>
        <img src={`${user.avatarUrl}?param=35y35`} alt='' loading='lazy' />
      </div>
      <div className={styles.info}>
        <div className={styles.comment}>
          <span className={styles.nickname}>{user.nickname}</span>
          <span>{content}</span>
        </div>
        <div className={styles.reply}>
          {beReplied.map((v, i) => {
            const { content, user } = v
            return (
              <div className={styles.item} key={i}>
                <span className={styles.nickname}>{user.nickname}</span>
                <span>{content}</span>
              </div>
            )
          })}
        </div>
        <div className={styles.others}>
          <div className={styles.time}> {formatDatetime(time, true)} </div>
          <div className={styles.operations}>
            <div className={cn(styles.like, liked && 'active')} onClick={handleUnLike}>
              <Icon icon='thumbs-up' iconSize={14} /> &nbsp;
              <span>{likedCount}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
})
export default Comment
